<template>
  <a class="model_box" @click="goToDetail">
    <span class="toptag" v-if="isTop && Index < 3">TOP  {{Index + 1}}</span>
    <div class="preview_box">
      <img class="previewImg" :src="prefixImg + Item.image " :alt="Item.name" :title="Item.name" @error="catchErrorImage($event)"/>
    </div>
    <div class="hotsale_info">
      <h3 class="title ellipsis"><span>{{Item.detail}}</span></h3>
      <span class="format">{{Item.brandName}}</span>
      <div class="format">{{Item.name}}</div>
      <h4 class="price">
        <template v-if="loginStatus === 1">
          <span class="vert-mid">￥{{Item.priceLowerLimit | floatPrices}} ~ ￥{{Item.priceUpperLimit | floatPrices}}</span>
        </template>
        <span class="color-ora" v-else-if="loginStatus === 4"> 登录后查看价格</span>
        <span class="color-ora" v-else> 审核通过可查看</span>
      </h4>
    </div>
  </a>
</template>

<script>
import { prefixImg } from '@/tool/index'
import { setBuryingPoint } from '@/service/get-data'
export default {
  name: 'modelProductNewYear',
  props: {
    Item: {
      type: Object
    },
    isTop: {
      type: Boolean,
      default: false
    },
    Index: {
      type: Number,
      default: 0
    },
    buryPoint: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    loginStatus () {
      return this.$store.getters.loginStatus
    }
  },
  data () {
    return {
      prefixImg,
      loadImg: require('@/images/newload.png')
      // product: require('../../images/pro.jpg')
    }
  },
  methods: {
    catchErrorImage (e) {
      e.target.src = require('img/newload.png')
    },
    // 埋点接口
    async setBuryingPoint (form, to) {
      let res = await setBuryingPoint(form, to)
      if (res.data.resultCode && res.data.resultCode === 2000) {
      } else {
        this.$message(res.data.resultMsg || '网络出错')
      }
    },
    // :to="{name: 'productDetail', params: {commodityID: Item.goodsId}}"
    goToDetail () {
      if (this.buryPoint && this.buryPoint.length > 0) {
        this.setBuryingPoint(this.buryPoint[0], this.buryPoint[1])
      }
      this.$router.push({name: 'productDetail', params: {commodityID: this.Item.goodsId}})
    }
  }
}
</script>

<style lang="scss" scoped>

.model_box{
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  width: 230px;
  height: 300px;
  background: #FFFFFF;
  text-align: center;
  margin-bottom: 10px;
  transition: all 0.2s linear;
  overflow: hidden;
  .preview_box{ 
    width: 195px;
    height: 195px;
    margin: 0 auto 1px;
    .previewImg{
      width: 100%;
      height:100%;
      vertical-align: middle;
    }
  }
  .toptag{
    position: absolute;
    top: 0px;
    left: 50%;
    width: 46px;
    margin-left: -23px;
    text-align: center;
    line-height: 20px;
    color: #fff;
    background: #ff5928;
    font-size: 12px;
  }
  .format{
    font-size: 12px;
    color: #B0B0B0;
    line-height: 17px;
  }
  .title{
    font-size: 14px;
    color: #666666;
    line-height: 20px;
    margin-bottom: 5px;
  }
  .price{
    font-size: 14px;
    color: #FF0100;
    line-height: 20px;
    margin-top: 10px;
    margin-bottom: 30px;
  }
}
</style>
